<template>
  <Modal v-model="modal" :title="title">
    <div class="tag-modal">
      <Form :model="form" :label-width="80" ref="form" :rules="rules">
        <FormItem label="标签名称" prop="name">
          <Input :maxlength="6" v-model.trim="form.name" placeholder="标签名称..."/>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="modal = false" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
  </Modal>
</template>
<script>
export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value.trim() === '') {
          callback(new Error('请输入标签名称'))
      } else {
        if (value.length < 2) {
          callback(new Error('标签名称在2-6个字之间'))
        } else {
          callback()
        }
      }
    }
    return {
      item: '',
      id: '',
      modal: false,
      title: '新增标签',
      btnDisabled: false,
      rules: {
        name: [
          { required: true, validator: validateName, trigger: 'blur' }
        ]
      },
      form: {
        name: ''
      },
      flag: false,
      oldName: null
    }
  },
  methods: {
    resetForm() {
      this.$refs.form.resetFields()
      this.form = {
        name: ''
      }
      this.id = ''
      this.oldName = ''
      this.flag = false
      this.btnDisabled = false
      this.title = '新增标签'
    },
    updateForm(item) {
      this.resetForm()
      if (item) {
        this.item = item
        this.form = {
          name: item.tagName
        }
        this.id = item.id
        this.oldName = item.tagName
      }
      this.openModal()
    },
    openModal() {
      this.modal = true
    },
    closeModal() {
      this.modal = false
    },
    getInfo(id){
      this.id = id
      this.$ajaxGet(`/product/tag/${id}`).then(data => {
        this.form.name = data.name
        this.oldName = data.name
        this.openModal()
      })
    },
    onSave() {
      if (this.btnDisabled) return
      if (this.form.name == this.oldName && this.form.name) {
        this.closeModal()
        return
      }
      this.btnDisabled = true
      this.$refs["form"].validate(valid => {
        if (valid) {
          let text = this.id ? '编辑' : '新增'
          let url = this.id ? '/activity/tag/updateActivityTag' : '/activity/tag/addActivityTag/'
          if (this.id) {
            let param = {
              tagName: this.form.name,
              id: this.id
            }
            this.$jsonPost(url, param).then(data => {
              this.$Notice.success({
                title: `${text}成功`
              })
              this.$emit('complete')
              this.closeModal()
            }).catch(() => {
              this.btnDisabled = false
            })
          } else {
            let param = {
              tagName: this.form.name
            }
            this.$ajaxGet(url, param).then(data => {
              this.$Notice.success({
                title: `${text}成功`
              })
              this.$emit('complete')
              this.closeModal()
            }).catch(() => {
              this.btnDisabled = false
            })
          }
        } else {
          this.btnDisabled = false
        }
      })
    }
  }
}
</script>